<template>
  <el-dialog
    title="重置密码"
    :close-on-click-modal="false"
    v-model="isShow"
    width="350px"
    @close="close"
  >
    <el-form ref="rulesForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="rPassword">
        <el-input v-model="form.rPassword" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { toRefs, reactive, ref, computed, watch, defineComponent } from 'vue'
import { useStore } from 'vuex'
import dialog from '@/mixins/dialog'
import { ElMessage } from 'element-plus'
import { StateType as UserStateType, User } from '@/store/modules/system/user'

interface FormType {
  userId: number | null;
  password: string;
  rPassword: string;
}
interface DataType {
  form: FormType;
  rules: object;
}
export default defineComponent({
  name: 'UpdatePwd',
  emits: ['onRefresh', 'close'], // this line
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const store = useStore<{user: UserStateType}>()
    const { dialogM } = dialog(props, context)
    const data = reactive<DataType>({
      form: {
        userId: null,
        password: '',
        rPassword: ''
      },
      rules: {
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        rPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          {
            validator: (rule: string, value: string, callback: Function) => {
              if (value !== data.form.password) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    })
    const rulesForm = ref<HTMLElement>()
    const userData = computed<User>(() => {
      return store.state.user.data
    })
    const submit = () => {
      rulesForm.value && (rulesForm.value as any).validate((valid: boolean) => {
        if (valid) {
          data.form.userId = userData.value.userId || null
          store.dispatch('user/resetPwd', data.form).then(() => {
            ElMessage.success({
              message: '重置密码成功',
              type: 'success'
            })
            context.emit('onRefresh')
            dialogM.close()
          })
        }
      })
    }
    watch(() => props.value, (val) => {
      if (!val) {
        store.commit('user/SET_DATA', null)
        data.form = {
          userId: null,
          password: '',
          rPassword: ''
        }
        rulesForm.value && (rulesForm.value as any).resetFields()
      }
    })
    return {
      rulesForm,
      submit,
      ...toRefs(data),
      ...toRefs(dialogM)
    }
  }
})
</script>
